// 引入样式
//常态化样式,设置适用于大部分浏览器
require("../../assets/css/normalize.css");
//重置样式
require("../../assets/css/reset.css");
//引入阿里矢量图
require("../../assets/fonts/iconfont.css");
//引入公共底部模板
require("../../assets/css/tabbar.less");
require("../../assets/css/navbar.less");
//自身样式
require("./sport_course.less");

//引入模块
//引入工具utils.js
const dom = require("../../utils/dom.js");
//引入axios
const axios = require("../../utils/axios.js");
window.addEventListener("DOMContentLoaded", function () {
	// 头部渲染
	dom.navbar("sport_course");
	// 尾部渲染
	dom.tabbar("sport_course");

	// 1.获取课程数据并渲染到页面上
	axios.get("/api/train/courseList").then((res) => {
		let newcourse = res.data.data.shift();
		// 最新课程
		dom.get(".new-course img").src = axios.defaults.baseURL + newcourse.imgurl;
		// 文字渲染
		dom.get(".new-course h4").textContent = newcourse.name;
		dom.get(".new-course p").textContent = newcourse.desc.slice(0, 25) + "...";
		// 携带参数传到下一个页面
		dom.get(".new-course a").href =
			"sport_course_intro.html?id=" + newcourse.courseId;
		// 课程列表
		let data = res.data.data;
		let html = "";
		data.forEach((v) => {
			html += `
			<li>
				<a href="sport_course_intro.html?id=${v.courseId}">
					<img src="${axios.defaults.baseURL + v.imgurl}" alt="" />
					<h4>${v.name}</h4>
					<p>${v.desc.slice(0, 20) + "..."}</p>
				</a>
			</li>
			`;
		});
		dom.get("#courseList").innerHTML = html;
	});
});
